<template>
  <div class="businessSettlement">
    <div class="banner">
      <img src="~assets/images/newpage-image/into-banner.jpg" alt="" />
      <div class="btn-banner"><router-link to="/merchant-settled" class="into-btn">我要入驻</router-link></div>
    </div>
    <div class="top-panel">
      <div class="container">
        <div class="item">
          <div class="icon"><img src="~assets/images/newpage-image/into-icon1.png" alt="" /></div>
          <div class="txt">
            <p class="title">免费入驻</p>
            <p>入驻无需任何费用</p>
          </div>
        </div>
        <div class="item">
          <div class="icon"><img src="~assets/images/newpage-image/into-icon2.png" alt="" /></div>
          <div class="txt">
            <p class="title">海量客户</p>
            <p>优质客户，精准营销</p>
          </div>
        </div>
        <div class="item">
          <div class="icon"><img src="~assets/images/newpage-image/into-icon3.png" alt="" /></div>
          <div class="txt">
            <p class="title">数字化升级</p>
            <p>企业管理，再无烦恼</p>
          </div>
        </div>
      </div>
    </div>
    <div class="into-step">
      <div class="container">
        <div class="step1 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num1.png" alt="" />
            <h3>
              <span>免费</span>
              入驻
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">只需提供真实企业信息，即可终生免费入驻找包装网，为您的包装事业助一臂之力！</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic1.png" alt="" /></div>
        </div>
        <div class="step2 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num2.png" alt="" />
            <h3>
              <span>精准</span>
              营销
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">平台沉淀海量优质买方，通过大数据赋能，开拓业务不再海底捞针，让您轻易实现精准营销。</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic2.png" alt="" /></div>
        </div>
        <div class="step3 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num3.png" alt="" />
            <h3>
              <span>产品</span>
              管理
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">专属打造的包装产品管理系统，帮您了解每一个产品的市场反馈和销售情况，科学管理产品开发。</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic3.png" alt="" /></div>
        </div>
        <div class="step4 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num4.png" alt="" />
            <h3>
              <span>订单</span>
              管理
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">先进的卖家后台订单管理系统，支持实时查看订单状态，不错过任何一笔生意。</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic4.png" alt="" /></div>
        </div>
        <div class="step5 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num5.png" alt="" />
            <h3>
              <span>客户</span>
              管理
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">找包装网云端客户管理帮助您更加便捷管理客户，通过数字可视化，让获客和客户管理从未如此轻松。</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic5.png" alt="" /></div>
        </div>
        <div class="step6 step-item">
          <div class="title">
            <img src="~assets/images/newpage-image/into-num6.png" alt="" />
            <h3>
              <span>产业</span>
              大数据
            </h3>
          </div>
          <div class="arrow"><img src="~assets/images/newpage-image/need-arrow.png" alt="" /></div>
          <div class="txt">平台定期发布产业大数据，指导企业产品开发，帮助企业制定营销方案，确保行业领先。</div>
          <div class="pic-box"><img src="~assets/images/newpage-image/into-pic6.png" alt="" /></div>
        </div>
      </div>
    </div>
    <div class="show-company">
      <div class="container">
        <h3 class="title">他们都入驻了找包装网</h3>
        <div class="swipercompany">
          <swiper class="swiper" :options="companySwiper">
            <swiper-slide class="company" v-for="(item, index) in list" :key="index">
              <div class="logo"><img :src="item.pic" alt="" class="objectCover" /></div>
              <div class="company-box">
                <div class="name">{{ item.name }}</div>
                <div class="info">
                  <img src="~assets/images/newpage-image/into-link.png" alt="" />
                  <span>主营</span>
                  <span class="info-desc">{{ item.info }}</span>
                </div>
                <div class="txt">
                  <img src="~assets/images/newpage-image/into-line1.png" alt="" class="first-icon" />
                  <span>{{ item.desc }}</span>
                  <img src="~assets/images/newpage-image/into-line2.png" alt="" class="last-icon" />
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <div class="arrow-icon">
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
export default {
  name: 'BusinessSettlement',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      list: [
        {
          pic: require('../../assets/images/newpage-image/com-logo.png'),
          name: '成都物通信联科技有限公司',
          info: '塑胶材料',
          desc: '让客户通过店铺自主下单。同时，店铺的议价功能能安全和方便的与客户沟通价格及时有..'
        },
        {
          pic: require('../../assets/images/newpage-image/com-logo1.png'),
          name: '成都艾利斯材料科技有限公司',
          info: '塑胶材料',
          desc: '所有的商品资源优先展示给线上店铺业务员每日会转发线上店铺链接到各个渠道让客户通过店铺自主下单。同时，店铺的议价功能能安全和方便的与客户沟通价格及时有效。'
        },
        {
          pic: require('../../assets/images/newpage-image/com-logo2.png'),
          name: '成都物通信联科技有限公司',
          info: '塑胶材料',
          desc: '让客户通过店铺自主下单。同时，店铺的议价功能能安全和方便的与客户沟通价格及时有..'
        },
        {
          pic: require('../../assets/images/newpage-image/com-logo.png'),
          name: '成都物通信联科技有限公司',
          info: '塑胶材料',
          desc: '让客户通过店铺自主下单。同时，店铺的议价功能能安全和方便的与客户沟通价格及时有..'
        },
        {
          pic: require('../../assets/images/newpage-image/com-logo.png'),
          name: '成都物通信联科技有限公司',
          info: '塑胶材料',
          desc: '让客户通过店铺自主下单。同时，店铺的议价功能能安全和方便的与客户沟通价格及时有..'
        }
      ],
      companySwiper: {
        slidesPerView: 3,
        spaceBetween: 15,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.businessSettlement {
  width: 100%;
  height: 100%;
  position: relative;
  .banner {
    position: relative;
    width: 100%;
    height: 550px;
    margin: 0 auto;
    .btn-banner {
      width: 1200px;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 0;
      bottom: 0;
      right: 0;
      .into-btn {
        display: block;
        width: 128px;
        height: 45px;
        margin-left: 100px;
        line-height: 45px;
        text-align: center;
        color: #fff;
        background: #e48b2c;
        border-radius: 10px;
      }
    }
    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
      position: relative;
    }
  }
  .top-panel {
    margin-top: -58px;
    position: relative;
    z-index: 99;
    .container {
      display: flex;
      justify-content: space-between;
      .item {
        width: 32%;
        height: 117px;
        background: #ffffff;
        box-shadow: 0px 0px 22px 0px rgba(180, 178, 178, 0.22);
        display: flex;
        justify-content: center;
        padding-top: 33px;
        .icon {
          margin-top: 2px;
        }
        .txt {
          margin-left: 33px;
          p {
            font-size: 16px;
            color: #969696;
          }
          .title {
            font-size: 20px;
            color: #666;
            margin-bottom: 8px;
          }
        }
        &:nth-of-type(2n) {
          .icon {
            margin-top: 6px;
          }
        }
      }
    }
  }
  .into-step {
    margin-top: 77px;
    padding-bottom: 100px;
    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .step-item {
        width: 48%;
        position: relative;
        padding-bottom: 104px;
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          color: #666;
          h3 {
            margin-left: 20px;
            span {
              color: #e48b2c;
            }
          }
        }
        .arrow {
          width: 100%;
          margin-top: 10px;
          img {
            display: block;
            width: 100%;
          }
        }
        .txt {
          font-size: 16px;
          color: #666;
          margin: 10px 0 22px;
        }
        .pic-box {
          width: 80%;
          height: 249px;
          margin: 0 auto;
          img {
            display: block;
            width: 100%;
          }
        }
        &:nth-of-type(2n-1) {
          &::before {
            content: '';
            position: absolute;
            top: 66px;
            right: -40px;
            width: 34px;
            height: 34px;
            background: #f3f4f7;
            border-radius: 50%;
            z-index: 99;
          }
          &::after {
            content: '';
            position: absolute;
            top: 73px;
            right: -32px;
            width: 18px;
            height: 18px;
            background: #e58a2d;
            border-radius: 50%;
            z-index: 100;
          }
          .txt {
            padding-right: 20px;
          }
        }
        &:nth-of-type(2n) {
          &::before {
            content: '';
            position: absolute;
            top: 66px;
            left: -26px;
            width: 1px;
            height: 100%;
            background: #e9e9e9;
            z-index: 88;
          }
          .txt {
            padding-left: 20px;
          }
          .arrow {
            img {
              transform: rotate(180deg);
            }
          }
        }
      }
      .step5 {
        padding-bottom: 0;
      }
      .step6 {
        padding-bottom: 0;
        margin-left: 48px;
        .pic-box {
          width: 82%;
        }
        &::before {
          height: 90% !important;
        }
      }
    }
  }
  .show-company {
    background: #f3f4f7;
    padding: 58px 0 88px;
    h3 {
      font-size: 30px;
      color: #4d4d4d;
      text-align: center;
    }
    .swipercompany {
      margin-top: 86px;
      position: relative;
      .company {
        height: 403px;
        position: relative;
        padding-top: 20px;
        transition: all 0.3s;
        &:hover {
          bottom: 8px;
          box-shadow: 0px 8px 6px 0px rgba(213, 208, 208, 0.17);
        }
        .logo {
          width: 101px;
          height: 101px;
          background: #ffffff;
          border: 1px solid #e9e9e9;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .company-box {
          height: 384px;
          background-image: url('~@/assets/images/newpage-image/com-bg.png');
          background-position: center center;
          background-size: 100% 100%;
          padding: 10px 20px 40px;

          .name {
            text-align: center;
            margin-top: 78px;
            color: #4d4d4d;
            font-size: 22px;
            margin-bottom: 30px;
          }
          .info {
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 13px;
              height: 15px;
            }
            span {
              color: #4d4d4d;
              font-size: 16px;
            }
            .info-desc {
              color: #e48b2c;
              border: 1px solid #e48b2c;
              padding: 2px 4px;
              margin-left: 10px;
            }
          }
          .txt {
            font-size: 16px;
            color: #797979;
            line-height: 26px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 40px;
            width: 90%;
            .first-icon {
              position: absolute;
              top: -15px;
              left: 0;
            }
            .last-icon {
              position: absolute;
              right: 0;
              bottom: -15px;
            }
            span {
              display: inline-block;
              padding: 0 20px;
            }
          }
        }
      }
      .arrow-icon {
        .swiper-button-next {
          background-image: url('~@/assets/images/newpage-image/arrow-right.png');
          right: -60px;
          outline: none;
        }
        .swiper-button-prev {
          background-image: url('~@/assets/images/newpage-image/arrow-left.png');
          left: -60px;
          outline: none;
        }
      }
    }
  }
}
</style>
